<template>
  <div>
    <div class="con">
      <tree @change-video="changeVideo" ref="treeDemo" class="treeDom"></tree>
      <div class="videoDome etcon">
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane name="echartzs">
            <span slot="label"
              ><i class="iconfont el-icon-zhexiantu"></i> 图形展示</span
            >
            <div v-if="destroy">
              <div class="echarts" ref="echartsa"></div>
              <div class="echarts" ref="echarts2"></div>
              <div class="echartsw" ref="echarts3"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="tablezs">
            <span slot="label"
              ><i class="iconfont el-icon-7table"></i> 表格展示</span
            >
            <el-table
              :data="tableData"
              height="70.3vh"
              :row-style="{ height: 0 + 'px' }"
              :cell-style="{ padding: 1 + 'px' }"
              style="width: 100%"
              stripe
              :header-cell-style="tableHeaderColor"
            >
              <el-table-column prop="solar_current" label="太阳能电流(A)">
              </el-table-column>
              <el-table-column prop="solar_voltage" label="太阳能电压(V)">
              </el-table-column>
              <el-table-column prop="battery_current" label="锂电池电流（A）">
              </el-table-column>
              <el-table-column prop="battery_voltage" label="锂电池电压（V）">
              </el-table-column>
              <el-table-column prop="nvr_temperature" label="设备温度℃">
              </el-table-column>
              <el-table-column
                prop="acquisition_time"
                label="采集时间"
                width="160"
              >
              </el-table-column>
              <el-table-column prop="nvr_IMEI" label="设备IMEI" width="160">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[30, 60, 90, 120, 200]"
          :page-size="60"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
      <br />
      <!-- <div style="clear: both"></div> -->
    </div>
  </div>
</template>

<script>
import Tree from "@/components/tree";
import { NvrMonit } from "@/http";
import * as echarts from "echarts";

export default {
  name: "CondtionMonit",
  components: {
    Tree,
  },
  data() {
    return {
      ids: "",
      page: 1,
      count: 10,
      limit: 60,
      tableData: [],
      setval: null,
      prom: null,
      destroy: true,
      activeName: "echartzs",
      showable: true,
      tiemrNvr: null,
    };
  },
  mounted() {
    this.$store.state.nvrData.length > 0
      ? this.getOneNvr()
      : (this.tiemrNvr = setInterval(() => {
          this.$store.state.nvrData.length > 0 &&
            (this.getOneNvr(), clearInterval(this.tiemrNvr));
        }, 500));
  },
  watch: {
    "$store.state.nvrData": {
      handler() {
        this.$refs["treeDemo"].$refs["tree"].setCurrentKey(this.ids);
      },
    },
  },
  computed: {},
  updated() {},
  activated() {
    this.showable = true;
    this.ids &&
      (this.queryNvrData(),
      this.$refs["treeDemo"].$refs["tree"].setCurrentKey(this.ids));

    !this.destroy
      ? (() => {
          this.destroy = true;
          this.queryNvrData();
        })()
      : "";
  },
  deactivated() {
    clearTimeout(this.setval);
    this.showable = false;
  },
  methods: {
    // 请求第一个在线的设备参数
    getOneNvr() {
      let aa = this.$store.state.nvrData.find((item) => {
        return item.nvr_state == 1;
      });
      this.ids = aa ? aa.node_id : this.$store.state.nvrData[0].node_id;
      this.queryNvrData(this.ids);
      this.$refs["treeDemo"].$refs["tree"].setCurrentKey(this.ids);
    },

    handleClick(tab) {
      this.activeName = tab.name;
    },
    changeVideo(e) {
      !e.children
        ? (() => {
            this.ids = e.node_id;
            this.page = 1;
            this.queryNvrData(e.node_id);
          })()
        : this.$refs["treeDemo"].$refs["tree"].setCurrentKey(this.ids);
    },
    queryNvrData(nvr_id = this.ids, page = this.page, limit = this.limit) {
      NvrMonit({ nvr_id, page, limit }).then((res) => {
        if (res.data) {
          clearTimeout(this.setval);
          this.setval = setTimeout(() => {
            this.queryNvrData();
          }, 1000 * 60);

          this.count = res.count;
          this.tableData = res.data;
          let battery_current = []; // 电池电流
          let battery_voltage = []; // 电池电压
          let solar_current = []; // 太阳能电流
          let solar_voltage = []; // 太阳能电压
          let acquisition_time = []; // 时间
          let nvr_temperature = []; // 温度
          res.data.forEach((item) => {
            battery_current.push(item.battery_current);
            battery_voltage.push(item.battery_voltage);
            solar_current.push(item.solar_current);
            solar_voltage.push(item.solar_voltage);
            nvr_temperature.push(item.nvr_temperature);
            acquisition_time.push(item.acquisition_time);
          });
          if (this.showable) {
            this.echartsNvrVoltage(
              acquisition_time,
              battery_voltage,
              solar_voltage
            );
            this.echartsNvrCurrent(
              acquisition_time,
              battery_current,
              solar_current
            );
            this.echartsNvrTemperature(acquisition_time, nvr_temperature);
          }
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.queryNvrData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryNvrData();
    },
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:3px 0";
      }
    },
    // 电压
    echartsNvrVoltage(aa, bb, cc) {
      let myChart1 = echarts.getInstanceByDom(this.$refs.echartsa); //有的话就获取已有echarts实例的DOM节点。
      if (myChart1 == null) {
        myChart1 = echarts.init(this.$refs.echartsa);
      }

      if (this.activeName == "echartzs") {
        this.$refs.echartsa.clientHeight == 0
          ? (this.destroy = false)
          : (this.destroy = true);
      }
      myChart1.setOption({
        grid: {
          top: "30px",
          left: "38",
          right: "18",
          bottom: "45",
        },
        title: {
          text: "锂电池/太阳能电压(V)",
          left: "30%",
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        color: ["#FF6666", "#009955"],
        legend: {
          orient: "horizontal",
          left: "52%",
          top: "3px",
          textStyle: {
            color: "#fff",
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          inverse: true,
          data: aa,
          axisLabel: {
            show: true,
            color: "#c3dbff", //更改坐标轴文字颜色
            fontSize: 10, //更改坐标轴文字大小
          },
          splitLine: {
            show: false,
          },
        },
        toolbox: {
          show: true,
          iconStyle: {
            borderColor: "#fff",
          },
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            //   dataView: { readOnly: false },
            // magicType: { type: ["line", "bar"] },
            smooth: true,
            restore: {},
            //   saveAsImage: {}, // 下载为图片
          },
        },
        yAxis: {
          type: "value",
          //设置坐标轴字体颜色和宽度
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            formatter: function (value) {
              return value.toFixed(2);
            },
          },
          splitLine: {
            show: false,
          },
          scale: true,
        },
        series: [
          {
            name: "锂电池电压(V)",
            type: "line",
            showSymbol: false,
            data: bb,
          },
          {
            name: "太阳能电池电压(V)",
            type: "line",
            showSymbol: false,
            data: cc,
          },
        ],
      });
    },
    // 电流
    echartsNvrCurrent(aa, bb, cc) {
      let myChart2 = echarts.getInstanceByDom(this.$refs.echarts2);
      if (myChart2 == null) {
        myChart2 = echarts.init(this.$refs.echarts2);
      }

      // var myChart2 = echarts.init(this.$refs.echarts2);

      myChart2.setOption({
        title: {
          text: "锂电池/太阳能电流(A)",
          left: "30%",
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#FF9933", "#009688"],
        grid: {
          top: "30px",
          left: "43",
          right: "18",
          bottom: "45",
        },
        legend: {
          orient: "horizontal",
          left: "52%",
          top: "3px",
          textStyle: {
            color: "#fff",
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: aa,
          inverse: true,
          axisLabel: {
            show: true,

            color: "#c3dbff", //更改坐标轴文字颜色
            fontSize: 10, //更改坐标轴文字大小
          },
        },
        yAxis: {
          type: "value",
          //设置坐标轴字体颜色和宽度
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            formatter: function (value) {
              return value.toFixed(2);
            },
          },
          splitLine: {
            show: false,
          },
          scale: true,
        },
        toolbox: {
          show: true,
          iconStyle: {
            borderColor: "#fff",
          },
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            //   dataView: { readOnly: false },
            // magicType: { type: ["line", "bar"] },
            smooth: true,
            restore: {},
            //   saveAsImage: {}, // 下载为图片
          },
        },
        series: [
          {
            name: "锂电池电流(A)",
            type: "line",
            showSymbol: false,
            data: bb,
          },
          {
            name: "太阳能电流(A)",
            type: "line",
            showSymbol: false,
            data: cc,
          },
        ],
      });
    },
    //温度
    echartsNvrTemperature(aa, bb) {
      // let myChart3 = echarts.init(this.$refs.echarts3);
      let myChart3 = echarts.getInstanceByDom(this.$refs.echarts3);
      if (myChart3 == null) {
        myChart3 = echarts.init(this.$refs.echarts3);
      }

      myChart3.setOption({
        title: {
          left: "42%",
          top: 0, //进行标题位置的微调，top:10 距离顶端10px
          x: "left", //标题的水平位置；left-左（默认）；right-右
          y: "top", //垂直位置：bottom-将标题置于表底；center-中间；top-上
          text: "设备温度℃",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          backgroundColor: "#fff", //设置背景色
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },

        toolbox: {
          right: 25,
          top: 10,
          show: true,
          iconStyle: {
            borderColor: "#fff",
          },

          feature: {
            //mark是辅助线开关
            mark: {
              //                            show:true
            },
            //数据可视化标签
            dataView: {
              //                            show:true,
              readOnly: false, //可修改数据
            },
            saveAsImage: {}, //下载标签
            magicType: {
              type: ["line"],
            }, //可更换图表样式标签
          },
        },

        //图表位置
        grid: {
          top: "45",
          left: "38",
          right: "50",
          bottom: "18",
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            inverse: true,
            axisLabel: {
              show: true,
              color: "#c3dbff", //更改坐标轴文字颜色
              fontSize: 12, //更改坐标轴文字大小
            },

            data: aa,
            // git
          },
        ],
        yAxis: {
          type: "value",
          //设置坐标轴字体颜色和宽度
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          scale: true,
        },
        //图标核心内容
        visualMap: [
          {
            top: 50,
            right: 10,
            textStyle: {
              color: "#fff",
            },
            precision: 2,
            min: -20,
            max: 80,
            inRange: {
              color: [
                "#5b83e9",
                "#33c5d9",
                "#56B648",
                "#93CE07",
                "#C1CF34",
                "#DABD33",
                "#F79333",
                "#E25331",
                "#a50026",
              ],
            },
          },
        ],
        series: [
          {
            name: "设备温度(℃)",
            type: "line",
            showSymbol: false,
            symbolSize: 10,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            data: bb,
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.treeDom {
  height: 83.5vh;
}
.videoDome {
  .treeDom;
  width: 80%;
  .echarts {
    width: 100%;
    height: 24vh;
  }
  .echartsw {
    .fl;
    width: 100%;
    height: 24vh;
  }
}
.el-table {
  margin-top: 15px;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.el-pagination {
  margin-top: 15px;
}
</style>
